@import "mixins";

markdown {
  @include webkitScrollbar(markdown-scrollbar);

  line-height: 1.5;

  overflow: auto;

  word-wrap: break-word;

  background-color: var(--color-markdown-background);

  * {
    box-sizing: border-box;

    cursor: initial;
    user-select: initial;
  }

  svg {
    * {
      cursor: default;
      user-select: none;
    }
  }

  > *:first-child {
    margin-top: 0;
  }

  &.lastMarginZero {
    > *:last-child {
      margin-bottom: 0;
    }
  }

  h1 {
    font-size: var(--font-markdown-h1);
    font-family: var(--font-family-markdown-h1);
    color: var(--color-markdown-h1);
  }

  h2 {
    font-size: var(--font-markdown-h2);
    font-family: var(--font-family-markdown-h1);
    color: var(--color-markdown-h2);
  }

  h3 {
    font-size: var(--font-markdown-h3);
    font-family: var(--font-family-markdown-h1);
    color: var(--color-markdown-h3);
  }

  h4 {
    font-size: var(--font-markdown-h4);
    font-family: var(--font-family-markdown-h1);
    color: var(--color-markdown-h4);
  }

  h5 {
    font-size: var(--font-markdown-h5);
    font-family: var(--font-family-markdown-h1);
    color: var(--color-markdown-h5);
  }

  h6 {
    font-size: var(--font-markdown-h6);
    font-family: var(--font-family-markdown-h1);
    color: var(--color-markdown-h6);
  }

  h1,
  h2 {
    padding-bottom: 0.3em;

    border-bottom: 1px solid var(--color-markdown-underline);
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.25;

    margin: var(--margin-markdown-hx);
  }

  p,
  blockquote,
  ul,
  ol {
    color: var(--color-markdown-text);
  }

  p,
  blockquote,
  ul,
  ol,
  table,
  pre {
    margin: 0 0 1rem 0;
  }

  p,
  blockquote {
    text-align: justify;
  }

  ul,
  ol {
    padding: 0 0 0 2em;
  }

  li + li {
    margin: 0.25em 0 0 0;
  }

  code {
    font-family: "Hack";
    font-size: 0.85em;

    margin: 0;
    padding: 0.2em 0;

    color: var(--color-markdown-code-inline);
    background-color: var(--color-markdown-code-inline-background);
  }

  pre {
    @include webkitScrollbar(
      markdown-code-scrollbar,
      0.75em,
      0 0 0.188rem 0.188rem,
      0 0 0.188rem 0.188rem
    );

    font-family: "Hack";
    font-size: 0.85em;
    line-height: 1.45;

    overflow: auto;

    margin-right: 0.5em;
    margin-left: 0.5em;
    padding: 1rem;

    word-wrap: normal;

    border-radius: 0.188rem;
    background-color: var(--color-markdown-code-background);

    code {
      font-size: 1em;
      line-height: inherit;

      display: inline;
      overflow: visible;

      margin: 0;
      padding: 0;

      word-wrap: normal;

      color: var(--color-markdown-code);
      background-color: transparent;
    }
  }

  table {
    @include webkitScrollbar(markdown-table-scrollbar);

    display: block;
    overflow: auto;

    max-width: 100%;

    border-spacing: 0;
    border-collapse: collapse;

    color: var(--color-markdown-text);

    tr {
      background-color: var(--color-markdown-table-row-background);
      &:nth-child(2n) {
        background-color: var(--color-markdown-table-row-background-2n);
      }
    }

    th {
      font-weight: 600;

      padding: 0.375rem 0.813em;

      white-space: nowrap;

      color: var(--color-markdown-table-header);
      border: 0.063rem solid var(--color-markdown-table-border);
      &:empty {
        display: none;
      }
    }

    td {
      padding: 0.375rem 0.813em;

      white-space: nowrap;

      border: 0.063rem solid var(--color-markdown-table-border);
    }
  }

  blockquote {
    padding: 0 1em;

    color: var(--color-markdown-blockquote-text);
    border-left: 0.25em solid var(--color-markdown-blockquote-border);

    p {
      margin: 0;
    }
  }

  strong {
    color: var(--color-markdown-strong);
  }

  hr {
    height: 0.25em;
    margin: 1.563em 0 1.25em 0;
    padding: 0;

    border: 0;
    background-color: var(--color-markdown-horizontal-rule);

    &::before {
      display: table;

      content: "";
    }

    &::after {
      display: table;
      clear: both;

      content: "";
    }
  }

  a {
    text-decoration: none;

    color: var(--color-markdown-link);

    &:hover {
      color: var(--color-markdown-link-hover);
    }

    &:active {
      color: var(--color-markdown-link-active);
    }
  }

  p {
    &.left {
      text-align: left;
    }
    &.center {
      text-align: center;
    }
    &.right {
      text-align: right;
    }
    &.fitImage {
      img {
        max-width: 100%;
      }
    }
  }

  * {
    &.noWrap {
      white-space: nowrap;
    }
  }
}

/*
 * Visual Studio 2015 dark style
 * Author: Nicolas LLOBERA <nllobera@gmail.com>
 */

.hljs-keyword,
.hljs-literal,
.hljs-symbol,
.hljs-name {
  color: #569cd6;
}
.hljs-link {
  text-decoration: underline;

  color: #569cd6;
}

.hljs-built_in,
.hljs-type {
  color: #4ec9b0;
}

.hljs-number,
.hljs-class {
  color: #b8d7a3;
}

.hljs-string,
.hljs-meta-string {
  color: #d69d85;
}

.hljs-regexp,
.hljs-template-tag {
  color: #9a5334;
}

.hljs-subst,
.hljs-function,
.hljs-title,
.hljs-params,
.hljs-formula {
  color: #dcdcdc;
}

.hljs-comment,
.hljs-quote {
  font-style: italic;

  color: #57a64a;
}

.hljs-doctag {
  color: #608b4e;
}

.hljs-meta,
.hljs-meta-keyword,
.hljs-tag {
  color: #9b9b9b;
}

.hljs-variable,
.hljs-template-variable {
  color: #bd63c5;
}

.hljs-attr,
.hljs-attribute,
.hljs-builtin-name {
  color: #9cdcfe;
}

.hljs-section {
  color: gold;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

.hljs-bullet,
.hljs-selector-tag,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: #d7ba7d;
}

.hljs-addition {
  display: inline-block;

  width: 100%;

  background-color: #144212;
}

.hljs-deletion {
  display: inline-block;

  width: 100%;

  background-color: #660000;
}
